<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>李师的博客</title>
	<link rel="stylesheet" href="./css/bootstrap.min.css">
	<script>
	//获取浏览器页面可见高度和宽度
var _PageHeight = document.documentElement.clientHeight,
    _PageWidth = document.documentElement.clientWidth;
//计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px）
var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,
    _LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;
//在页面未加载完毕之前显示的loading Html自定义内容
var _LoadingHtml = '<style>.loadbox{position:fixed; left:0; top:0; width:100%; height:100%; background:#f8f8f8; z-index:99990;}.spinner{width:80px;height:80px;position:absolute; left:50%; top:40%; margin-left:-40px;}.double-bounce1,.double-bounce2{width:100%;height:100%;border-radius:50%;background-color:#67CF22;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:bounce 2s infinite ease-in-out;animation:bounce 2s infinite ease-in-out}.double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1)}}@keyframes bounce{0%,100%{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}</style><div class="loadbox" id="loadingDiv"><div class="spinner"><div class="double-bounce1"></div><div class="double-bounce2"></div></div></div>';

/*  Bak
var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#f3f8ff;opacity:1;filter:alpha(opacity=80);z-index:10000;"><div style="position: absolute; cursor1: wait; left: ' + _LoadingLeft + 'px; top:' + _LoadingTop + 'px; width: auto; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 5px; background: #fff url(Image/loading.gif) no-repeat scroll 5px 10px; border: 2px solid #95B8E7; color: #696969; font-family:\'Microsoft YaHei\';">页面加载中，请等待...</div></div>';
*/
//呈现loading效果
document.write(_LoadingHtml);

//window.onload = function () {
//    var loadingMask = document.getElementById('loadingDiv');
//    loadingMask.parentNode.removeChild(loadingMask);
//};

//监听加载状态改变
document.onreadystatechange = completeLoading;

//加载状态为complete时移除loading效果
function completeLoading() {
    if (document.readyState == "complete") {
        var loadingMask = document.getElementById('loadingDiv');
        loadingMask.parentNode.removeChild(loadingMask);
    }
}
</script>
	<script src="./js/jquery-1.11.1.min.js"></script>
	<script src="./js/bootstrap.min.js"></script>

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
	    body{
	    	background-color: rgb(227, 227, 227);
	    	font-family: 微软雅黑, "Microsoft YaHei", Monaco, "Helvetica Neue", Helvetica, Arial, sans-serif;
	    }
	    *::selection{color:#fff;background:#9D3D3F;}
		*::-webkit-selection{color:#fff;background:#9D3D3F;}
    	.navbar-form .ex-search{
    		width:110px;
    	}
    	.nav li a{
    		padding-left: 10px;
    		padding-right: 10px;
    	}
    	@media (min-width: 1200px) {
		    .container {width: 970px;max-width: none !important;}
		}
		.ex-container{
			padding-left: 10px;
			padding-right: 10px;
			margin-top: 5px;
		}
		/*.ly-nav .ly-brand {
			color:black;
			font-size: 18px;
		}
		.ly-nav .nav  li a{
			color:black;
		}
		.ly-nav .nav  li a:hover{
			color:#fff;
			background: #9D3D3F;
		}*/
		.ly-card .ly-card-header{
			background-color: #5c85e5;
			font-size:16px;
			color:#fff;
		}
		.ly-card .ly-card-body{
			padding: 0;
		}
		.ly-card-body .article-list{
			margin:0;
		}
		.ly-card-body-list,.ly-card-body-list a,.ly-card-body .article-list li {
			margin:0;
			border:0;
			border-bottom: 1px solid #e3e3e3;
		}
		.ex-icon{
			margin-right: 10px;
			color:#999;
		}
		[class*="icon-"], [class^=icon-]{
			/*选择其 class 属性中包含 "icon" 子串的元素。*/
			/**选择其 class 属性值以 "icon" 开头的元素。*/
			vertical-align: text-top;
			margin-top: 2px;
			margin-right: 3px;
		}
		.middle-img {
			margin-top:15px;
		}
		.middle-img img{
			width:180px;
			height:135px;
		}
		.ex-footer{
			padding:16px 0 14px;
		}
    </style>
</head>
<body>
	<nav class="navbar navbar-inverse navbar-static-top ly-nav" role="navigation">
	  <div class="container">
	    	<!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
		        <span class="sr-only"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <a class="navbar-brand ly-brand" href="#">风尘已轩</a>
		 	</div>
    		<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse navbar-left" id="bs-example-navbar-collapse-1">
		      <ul class="nav navbar-nav">
		        <li class="active"><a href="#">首页</a></li>
		        <li><a href="#">HTML/CSS3</a></li>
		        <li><a href="#">JavaScript</a></li>
		        <li><a href="#">框架</a></li>
		        <li><a href="#">随笔</a></li>
		        <li><a href="#">关于</a></li>
		         <li><a href="#">留言</a></li>
		      </ul>  
			</div>
		    <div class="collapse navbar-collapse navbar-right">
		      <form class="navbar-form" role="search">
		        <div class="form-group">
		          <input type="text" class="form-control ex-search" placeholder="bootstrap">
		        </div>
		        <button type="submit" class="btn btn-default">搜索</button>
		      </form>	
		    </div> 
  		</div>
	</nav>
	<div class="container ex-container">
		<div class="row">
			<div class="col-md-8">
				<div class="panel panel-default ly-card">
				  <div class="panel-heading ly-card-header">最新文章</div>
				  <div class="panel-body ly-card-body">
				    <ul class="list-group article-list">
					  <li class="list-group-item">
					  	<div class="row">
						  <div class="col-md-4 col-lg-4 middle-img">
						    <a href="#" class="clearfix">
						      <img data-src="" alt="..." src="./img/ceshi.jpg">
						    </a>
						  </div>
						   <div class="col-md-8 col-lg-8">
							    <h3><a href="" class="alert-link">测试标题</a></h3>
	        					<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
	        					<p><span class="ex-icon"><i class="glyphicon glyphicon-user"></i>风尘已轩</span><span class="ex-icon"><i class="glyphicon glyphicon-time"></i>11月11日</span><span class="ex-icon"><i class="glyphicon glyphicon-eye-open"></i>20000次浏览</span></p>
						  </div>
						</div>
					  </li>
					  <li class="list-group-item">
					  	<div class="row">
						  <div class="col-md-4 col-lg-4 middle-img">
						    <a href="#" class="clearfix">
						      <img data-src="" alt="..." src="./img/ceshi.jpg">
						    </a>
						  </div>
						   <div class="col-md-8 col-lg-8">
							    <h3><a href="" class="alert-link">测试标题</a></h3>
	        					<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
	        					<p><span class="ex-icon"><i class="glyphicon glyphicon-user"></i>风尘已轩</span><span class="ex-icon"><i class="glyphicon glyphicon-time"></i>11月11日</span><span class="ex-icon"><i class="glyphicon glyphicon-eye-open"></i>20000次浏览</span></p>
						  </div>
						</div>
					  </li>
					  <li class="list-group-item">
					  	<div class="row">
						  <div class="col-md-4 col-lg-4 middle-img">
						    <a href="#" class="clearfix">
						      <img data-src="" alt="..." src="./img/ceshi.jpg">
						    </a>
						  </div>
						   <div class="col-md-8 col-lg-8">
							    <h3><a href="" class="alert-link">测试标题</a></h3>
	        					<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
	        					<p><span class="ex-icon"><i class="glyphicon glyphicon-user"></i>风尘已轩</span><span class="ex-icon"><i class="glyphicon glyphicon-time"></i>11月11日</span><span class="ex-icon"><i class="glyphicon glyphicon-eye-open"></i>20000次浏览</span></p>
						  </div>
						</div>
					  </li>
					  <li class="list-group-item">
					  	<div class="row">
						  <div class="col-md-4 col-lg-4 middle-img">
						    <a href="#" class="clearfix">
						      <img data-src="" alt="..." src="./img/ceshi.jpg">
						    </a>
						  </div>
						   <div class="col-md-8 col-lg-8">
							    <h3><a href="" class="alert-link">测试标题</a></h3>
	        					<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
	        					<p><span class="ex-icon"><i class="glyphicon glyphicon-user"></i>风尘已轩</span><span class="ex-icon"><i class="glyphicon glyphicon-time"></i>11月11日</span><span class="ex-icon"><i class="glyphicon glyphicon-eye-open"></i>20000次浏览</span></p>
						  </div>
						</div>
					  </li>
					  <li class="list-group-item">
					  	<div class="row">
						  <div class="col-md-4 col-lg-4 middle-img">
						    <a href="#" class="clearfix">
						      <img data-src="" alt="..." src="./img/ceshi.jpg">
						    </a>
						  </div>
						   <div class="col-md-8 col-lg-8">
							    <h3><a href="" class="alert-link">测试标题</a></h3>
	        					<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
	        					<p><span class="ex-icon"><i class="glyphicon glyphicon-user"></i>风尘已轩</span><span class="ex-icon"><i class="glyphicon glyphicon-time"></i>11月11日</span><span class="ex-icon"><i class="glyphicon glyphicon-eye-open"></i>20000次浏览</span></p>
						  </div>
						</div>
					  </li>
					 
					</ul>
				  </div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="panel panel-default ly-card">
				  <div class="panel-heading ly-card-header">热门标签</div>
				  <div class="panel-body ly-card-body">
				    Panel content
				  </div>
				</div>
				<div class="panel panel-default ly-card">
					<div class="panel-heading ly-card-header">最新评论</div>
					<div class="panel-body ly-card-body">
					   <div class="list-group ly-card-body-list">
					   	<a href="" class="list-group-item">很好</a>
					   	<a href="" class="list-group-item">很好</a>
					   	<a href="" class="list-group-item">很好</a>
					   	<a href="" class="list-group-item">很好</a>
					   </div>
					</div>
				</div>
				<div class="panel panel-default ly-card">
					<div class="panel-heading ly-card-header">推荐文章</div>
					<div class="panel-body ly-card-body">
					   <div class="list-group ly-card-body-list">
					   	<a href="" class="list-group-item">Mysql索引会失效的几种情况总结</a>
					   	<a href="" class="list-group-item">Mysql索引会失效的几种情况总结</a>
					   	<a href="" class="list-group-item">Mysql索引会失效的几种情况总结</a>
					   	<a href="" class="list-group-item">Mysql索引会失效的几种情况总结</a>
					   </div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<nav class="navbar navbar-default navbar-static-bottom" role="navigation">
		<div class="container ex-footer">	
			<a href="">Copyright &copy; 2016, LyiceBlog All Rights Reserved. </a>
			 <span>豫ICP备16029870号</span>
   			 <script src="https://s11.cnzz.com/z_stat.php?id=1261147447&web_id=1261147447" language="JavaScript">
   			 </script>			       
		</div>
	</nav>

</body>
</html>